<template>
  <el-form :model="form" :rules="rules" ref="ruleFormRef" status-icon :label-position="labelPosition" label-width="120px"
    :inline="true" class="demo-form-inline">
    <el-form-item label="团队名称" prop="name">
      <el-input maxlength="50" v-model="form.name" />
    </el-form-item>

    <el-form-item label="所属单位" prop="unitName">
      <SelectOption :selectValue="form.unitName" :options="data.orgAllList" @change-value="changeValue"> </SelectOption>
    </el-form-item>

    <el-form-item label="牵头人" prop="managerName">
      <SelectOption :selectValue="form.managerName" :options="data.userAllList" @change-value="changeValue1"> </SelectOption>
    </el-form-item>

    <el-form-item label="团队级别" prop="teamLevel">
      <SelectOption :selectValue="form.teamLevel" :options="data.levelOptions" @change-value="changeValue2"> </SelectOption>
    </el-form-item>

    <el-form-item label="团队类别" prop="teamClass">
      <SelectOption :options="data.typeOptions" :selectValue="form.teamClass" @change-value="changeValue3"> </SelectOption>
    </el-form-item>

    <el-form-item label="技术领域" prop="techFieldName">
      <SelectOption :selectValue="form.techFieldName" :options="data.researchSelect" @change-value="changeValue4"> </SelectOption>
    </el-form-item>

    <el-form-item label="认定日期" prop="confirmDate">
      <el-date-picker v-model="form.confirmDate" format="YYYY-MM-DD" type="date" placeholder="选择日期" clearable @change="handleChangeDate" />
    </el-form-item>

    <el-form-item label="博士及以上学历" prop="doctorCount">
      <el-input oninput="value=value.replace(/^0|[^0-9]/g,'')" type="number" v-model="form.doctorCount" />
    </el-form-item>

    <el-form-item label="高级及以上职称" prop="middleTitleCount">
      <el-input oninput="value=value.replace(/^0|[^0-9]/g,'')" type="number" v-model="form.middleTitleCount" />
    </el-form-item>

    <el-form-item label="团队介绍" style="width: 100%">
      <el-input v-model="form.shortIntroduction" :autosize="{ minRows: 2 }" maxlength="300" type="textarea"
        placeholder="请输入" />
    </el-form-item>
  </el-form>
</template>
<script lang="ts">
import SelectOption from '@/views/science/components/selectOption/index.vue'
import { computed, reactive, ref, watch } from 'vue'
import { useStore } from 'vuex'
export default {
  components: {
    SelectOption,
  },
  emits: {
    valueFlag: null,
  },
  setup(props, { emit }) {
    const store = useStore()
    const labelPosition = ref('right')

    const data = reactive({
      activeName: ref('first'),
      addUnit: false,
      innerValue: '',
      outsideValue: '',

      levelOptions: computed(() => store.state.innovativeTalents.cxlevelSelect),
      typeOptions: [],

      researchSelect: computed(() => store.state.innovativeTalents.businessList),
      stateSelect: computed(() => store.state.innovativeTalents.tdStatue),

      userAllList: computed(() => store.state.technologyStrength.userAllList),
      orgAllList: computed(() => store.state.technologyStrength.orgAllList),
    })
    const form = reactive(store.state.innovativeTalents.talentTeamInfo)
    watch(form, (newValue, oldValue) => {
      store.commit('innovativeTalents/getTalentTeamInfo', { ...form })
    });

    if(form.teamLevelId){
      data.levelOptions.map((item)=>{
        if(item.itemValue == form.teamLevelId){
          data.typeOptions = item.children
        }
      })
    }

    const changeValue = (item) => {
      form.unitName = item.name
      form.unitId = item.id
    }
    const changeValue1 = (item) => {
      form.managerName = item.username
      form.managerId = item.userId
    }
    const changeValue2 = (item) => {
      form.teamLevel = item.itemText
      form.teamLevelId = item.itemValue
      data.typeOptions = item.children
      form.teamClass = ''
      form.teamClassId = ''
    }
    const changeValue3 = (item) => {
      form.teamClass = item.itemText
      form.teamClassId = item.itemValue
    }
    const changeValue4 = (item) => {
      form.techFieldName = item.itemText
      form.techFieldId = item.itemValue
    }

   

    const rules = reactive({
      name: [
        { required: true, message: '请输入团队名称', trigger: 'blur' },
      ],
      unitName: [
        { required: true, message: '请选择所属单位', trigger: 'change', },
      ],
      managerName: [
        { required: true, message: '请选择牵头人', trigger: 'change', },
      ],
      teamLevel:[
        { required: true, message: '请选择团队级别', trigger: 'change', },
      ],
      teamClass: [
        { required: true, message: '请选择团队类别', trigger: 'change', },
      ],
      techFieldName: [
        { required: true, message: '请选择技术领域', trigger: 'change', },
      ],
      confirmDate: [
        { required: true, message: '请选择认定日期', trigger: 'change' },
      ],
      doctorCount: [
        { required: true, message: '请输入博士及以上学历', trigger: 'blur', },
      ],
      middleTitleCount: [
        { required: true, message: '请输入高级及以上职称', trigger: 'blur' },
      ],
    })

    const ruleFormRef = ref()
    const submitForm = async () => {
      await ruleFormRef.value.validate((valid, fields) => {
        if (valid) {
          emit('valueFlag', true)
          console.log('submit!')
        } else {
          emit('valueFlag', false)
        }
      })
    }

    const handleChangeDate = (val) => {
      const year = val.getFullYear(); // 获取年份
      const month = (val.getMonth() + 1) < 10 ? '0' + (val.getMonth() + 1) : (val.getMonth() + 1); // 获取月份，需要加1
      const day = val.getDate() < 10 ? '0' + val.getDate() : val.getDate(); // 获取日期
      const formattedDate = `${year}-${month}-${day}`;
      form.confirmDate = formattedDate
      store.commit('innovativeTalents/getTalentTeamInfo', { ...form })
    }


    return {
      labelPosition,
      data,
      form,
      rules,
      ruleFormRef,
      submitForm,
      handleChangeDate,

      changeValue,
      changeValue1,
      changeValue2,
      changeValue3,
      changeValue4

    }
  },
}
</script>
<style lang="scss" scoped>
.demo-form-inline .el-form-item {
  width: 48%;
}

:deep(.labelHeight .el-form-item__label) {
  line-height: 20px;
}

:deep(.el-date-editor.el-input) {
  width: 100%;
}

:deep(.el-date-editor.el-input__inner) {
  width: 100%;
}

:deep(.demo-form-inline .el-select) {
  width: 100%;
  margin: 0;
}

.el-select {
  width: 100%;
  margin: 0;
}

.selectLabel {
  width: 70%;
  min-height: 40px;
  line-height: 40px;
  padding: 0 15px;
  border: 1px solid #ccc;
  border-radius: 6px;
  display: inline-block;
}

.addLabel {
  display: inline-block;
  width: 120px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background-color: #169bd5;
  border-radius: 6px;
  color: #fff;
  margin-left: 15px;
}

.unitBox {
  width: 100%;
  margin: 30px 0;

  .title {
    padding: 15px 0;
    border-bottom: 1px solid #ccc;
  }

  .tagBox {
    line-height: 40px;
    margin-top: 15px;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 10px 15px;
  }
}

.el-tag {
  margin-right: 10px;
}
</style>
  